<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: white">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 25px;margin: 15px 0 20px 20px"><van-icon name="arrow-left" /></div>
    </div>
    <div style="width: 85%;height: 180px;margin: 30px 0 0 30px;background: white">
      <div style="font-size: 35px; text-align: left;">设置新手机号</div>
    </div>
    <div style="width: 85%;height: 300px;margin: 0px 0 0 30px;background: white">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel"   type="tel" label="手机号" style="border-bottom: lightgray 1px solid;" />
      <van-field
          style=";width: 100%; border-bottom: 1px solid lightgray;"
          v-model="sms"
          center
          clearable
          placeholder="验证码"
      >
        <template #button>
          <van-button
              :size="small"
              type="primary"
              :style="{
               background: '#eaebff',
               color: 'dodgerblue',
               'border-radius': '20px',
               padding: '10px',
               width: '120px',
               border: 'white',
               'font-weight': 'bold',
               height: '30px'
            }"
              :disabled="isDisabled"
              @click="hqyzm"
          >{{ buttonText }}</van-button>
        </template>
      </van-field>
      <van-button type="primary" style="width: 100%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 40px; border-radius:50px;" @click="phoneUpdate">确定</van-button>
    </div>

  </div>

</template>

<script>
import { ref } from 'vue';

import {userPhoneUpdate ,userPasswordUpdate , userPayPasswordUpdate, Delete, yzm ,phoneRepeat} from "@/api/SetUp/AccountSafe/accountSafa"

export default {
  setup() {
    const tel = ref('');
    const sms = ref('');

    return { tel , sms};
  },

  data() {
    return {
      remainingTime: 60,
      isDisabled: false,
      buttonText: '获取验证码',
      query:{
        name:null
      },
      yzm:'',
      sms:'',
      count:0,
      user:JSON.parse(localStorage.getItem('login')),
      user2:{},
    };
  },
  created() {
    this.query=this.$route.query;
  },
  methods: {
    fanhui(){
      this.$router.push('/accountSafe')
    },
    phoneUpdate(){
      if(this.count==0) {
        this.$toast('请先获取验证码');
      }else if(this.sms==null){
        this.$toast('请输入验证码');
      }else if(this.sms!=this.yzm){
        this.$toast('验证码错误');
      }else if(this.sms==this.yzm) {
        phoneRepeat(this.tel).then(ros => {
          if (ros.data) {
            userPhoneUpdate(this.user).then(row => {
              this.user.phone = this.tel
              this.user.account = this.tel
              this.user2 = this.user
              localStorage.removeItem("login");
              localStorage.setItem('login', JSON.stringify(this.user2));
              this.$toast('修改成功');
              this.$router.push('/accountSafe')

            })
          } else {
            this.$toast('该手机号已存在');
          }
        })
      }
    },
    hqyzm(){
      const regex = /^1[3-9]\d{9}$/;
     if(!regex.test(this.tel)) {
       this.$toast('请输入正确的手机号');
     } else{
       if(this.user.phone==this.tel){
         this.$toast('手机号不能与原手机号相同');
       }else{

         this.user.phone=this.tel;
         yzm(this.tel).then(row => {
           if(row.data.code==200){
             this.yzm=row.data.data;
             this.$toast('验证码已发送');
             this.count=1;
             if (this.remainingTime === 60) {
               this.isDisabled = true;
               const countdownInterval = setInterval(() => {
                 this.remainingTime--;
                 this.buttonText = `${this.remainingTime}s`;
                 if (this.remainingTime === 0) {
                   clearInterval(countdownInterval);
                   this.isDisabled = false;
                   this.buttonText = '重新获取';
                 }
               }, 1000);
             }
           }else{
             this.$toast('网络繁忙，稍后再试');
           }
         })
       }
     }



    },
  },
};
</script>

<style scoped>

</style>
